import {storeToRefs} from "pinia";
import {defineComponent, ref, provide, h, computed, KeepAlive, Transition, Component} from "vue";
import {useRouter} from "vue-router";
import {useUserInfo} from "@/store/moduls/userinfo";
import {useMyRouter} from "@/store/moduls/usemyroute";
import {NLayout, NLayoutSider, NLayoutContent, NLayoutHeader, useDialog, NImage, NWatermark,} from "naive-ui"
import Taglist from "./taglist"
import Myheader from "./myheader"
import Leftnav from "./leftnav";

export default defineComponent({
    name: "MainHtml",
    setup() {
        const router = useRouter()
        const dialog = useDialog()
        // 导入用户数据
        const useraction = useUserInfo()
        const {id, name} = storeToRefs(useraction)
        const usemyroute = useMyRouter()
        const {routelist} = storeToRefs(usemyroute)
        // 侧边的收缩状态
        const collapsed = ref(false)
        // 缓存组件的初始化函数
        const zujianchushihuaobj = ref<{ [key: string]: Function }>({})
        // 调用缓存组件的初始化方法
        const callInitFunc = (name: string) => {
            if (zujianchushihuaobj.value[name]) {
                zujianchushihuaobj.value[name]()
            }
            router.push({name: name})
        }
        // 当前缓存的路由name列表
        const menuNameList = computed(() => {
            return routelist.value.map((el) => el.name)
        })
        const init = () => {
            // 初始化的时候，如果用户ID不存在，就跳转到登录页
            if (!id.value || name.value === "anyuser") {
                router.push({name: "Login"})
            }
        }
        // 全局共用的删除方法,params删除请求参数，deleteFunc自定义的删除方法,refreshFunc刷新方法,title提示信息
        const overDeleteFunc = (params: any, deleteFunc: Function, refreshFunc: Function | null = null, title: string = "") => {
            // 创建提示弹窗
            const createDialog = () => {
                const cc = dialog.error({
                    title: '删除',
                    content: () => {
                        return h('div',
                            {class: {'w-400px h-40px flex items-center': true}},
                            [
                                h("span", {}, {
                                    default() {
                                        return '我为党国立过功，我为委座流过血，你们不能杀我！'
                                    },
                                }),
                                h(
                                    NImage,
                                    {
                                        src: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_6.dde0d83.png',
                                        height: 40,
                                        width: 40,
                                        previewDisabled: true,
                                    },
                                    {
                                        default() {
                                        },
                                    },
                                ),
                            ],)
                    },
                    positiveText: '必须枪毙',
                    negativeText: '放了吧',
                    showIcon: false,
                    onPositiveClick: () => {
                        cc.loading = true
                        deleteFunc(null, params).then((res: any) => {
                            if (res.success) {
                                getSuccess(res.msg || "删除成功")
                            } else {
                                getFaild(res.error || res.msg || "删除失败")
                            }
                        }).catch((err: Error) => {
                            getFaild(err.message || "系统错误")
                        })
                    },
                    onNegativeClick: () => {
                    }
                })
            }
            // 创建成功弹窗
            const getSuccess = (msg: string) => {
                const aa = dialog.success({
                    title: '删除成功',
                    content: () => {
                        return h(
                            'span',
                            {},
                            {
                                default() {
                                    return msg || "删除数据成功"
                                },
                            },
                        )
                    },
                    negativeText: '关闭',
                    showIcon: false,
                })
                setTimeout(() => {
                    refreshFunc && refreshFunc()
                    aa.destroy()
                }, 1000)
            }
            // 创建失败弹窗
            const getFaild = (errorStr: string) => {
                dialog.error({
                    title: '删除失败',
                    content: () => {
                        return h(
                            'span',
                            {},
                            {
                                default() {
                                    return errorStr || '删除错误'
                                },
                            },
                        )
                    },
                    negativeText: '关闭',
                    showIcon: false,
                })
            }

            // 开始执行
            createDialog()
        }
        // 将每个组件的初始化函数注册到顶级组件内部，方便直接调用
        const zhuceshuaxinfunc = (obj: { [key: string]: Function }) => {
            zujianchushihuaobj.value = {...zujianchushihuaobj.value, ...obj}
        }
        // 将方法注入到所有子组件内
        provide("overDeleteFunc", overDeleteFunc)
        provide("zhuceshuaxinfunc", zhuceshuaxinfunc)
        // 初始化区域
        init()
        return () => (

            <NLayout hasSider={true} class="w-screen h-screen">
                <NLayoutSider
                    collapse-mode={"width"}
                    collapsed-width={64}
                    collapsed={collapsed.value}
                    width={200}
                    show-trigger={"bar"}
                    bordered={true}
                    onCollapse={() => {
                        collapsed.value = true
                    }}
                    onExpand={() => {
                        collapsed.value = false
                    }}
                >
                    <Leftnav collapsed={collapsed.value}/>
                </NLayoutSider>
                <NLayout>
                    <NLayoutHeader bordered={true}>
                        <Myheader/>
                    </NLayoutHeader>
                    <NLayoutContent>
                        <NLayout class="w-full h-full">
                            <NLayoutHeader bordered={true}>
                                <Taglist callInitFunc={callInitFunc}/>
                            </NLayoutHeader>
                            <NLayoutContent content-style={"padding-left: 20px;"} class="bg-gray-200">
                                <NWatermark
                                    class="w-full h-full"
                                    content={ name.value || "核心机密"}
                                    cross={true}
                                    selectable={true}
                                    font-size={16}
                                    line-height={16}
                                    width={192}
                                    height={128}
                                    x-offset={12}
                                    y-offset={28}
                                    rotate={-15}
                                >
                                    <router-view v-slots={{
                                        default: (scope: any) => <KeepAlive>{scope.Component}</KeepAlive>,
                                    }}>
                                    </router-view>
                                </NWatermark>
                            </NLayoutContent>
                        </NLayout>
                    </NLayoutContent>
                </NLayout>
            </NLayout>

        )
    },
})
